<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
</head>

<body>
  <div id="nav">
    演示页面专用
    <a href="#" class="iframe-link" data-src="./player-image/index.html" target="theIframe" > 图片播放器
      ./player-image/index.html</a>
    <a href="#" class="iframe-link" data-src="./player-video/index.html" target="theIframe"> 视频播放器
      ./player-video/index.html</a>

  </div>

  <iframe id="theIframe" style="height: 100vh; width: 100vw; "></iframe>
</body>
<style>
  body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }

  #nav {
    border-radius: 9px;
    background-color: rgba(0, 0, 0, 0.345);
    width: 100vw;
    height: 40px;
    position: fixed;
    top: 10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  #nav a {
    display: flex;
    height: 36px;
    line-height: 30px;
    padding: 3px 10px;
    border-radius: 3px;
    background-color: rgb(95, 92, 92);
    color: rgb(36, 45, 45);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  }

  #nav a:hover,
  #nav a:active {

    border-radius: 9px;
    background-color: rgb(255, 255, 255);
    color: rgb(31, 146, 174);
  }

  #nav a.cur {

    border-radius: 9px;
    background-color: rgb(255, 255, 255);
    color: rgb(31, 146, 174);
  }

  #theIframe {
    /* 没有边框 */

    border: none;
    padding: 0;
    margin: 0;
  }
</style>
<script>
  // JavaScript
  document.addEventListener('DOMContentLoaded', function () {
    const iframeLinks = document.querySelectorAll('.iframe-link');
    const iframe = document.getElementById('theIframe');
   
    iframeLinks.forEach(function (link) {
      link.addEventListener('click', function (event) {
        event.preventDefault(); // 阻止默认的链接跳转行为

        iframe.src = this.dataset.src; // 从 data-src 属性获取并设置新的 iframe.src
        // 移除所有 .iframe-link 的 "cur" 类
        iframeLinks.forEach(link => link.classList.remove('cur'));

        // 给当前点击的 <a> 添加 "cur" 类
        this.classList.add('cur');
      });
    });

     // 触发第一个 <a> 的点击事件
      iframeLinks[0].dispatchEvent(new Event('click'));

  });
  // 
</script>

</html>